<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    div {
      width: 700px;
      height: 220px;
      background-color: red;
      display: flex;
    }
    .flex-start_div {
      justify-content: flex-start;
    }
    .flex-end_div {
      justify-content: flex-end;
    }
    .flex-center_div {
      justify-content: center;
    }
    .flex-space-between_div {
      justify-content: space-between;
    }
    .flex-space-evenly_div {
      justify-content: space-evenly;
    }
    .flex-space-around_div {
      justify-content: space-around;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: orange;
      border: 2px dashed yellow;
    }
    .high_div {
      height: 500px;
    }
    ul {
      display: flex;
    }
    </style>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <h2>default</h2>
    <div class="flex-default">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>flex-start</h2>
    <div class="flex-start_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>flex-end</h2>
    <div class="flex-end_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>center</h2>
    <div class="flex-center_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>space-between</h2>
    <div class="flex-space-between_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>space-evenly</h2>
    <div class="flex-space-evenly_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>space-around</h2>
    <div class="flex-space-around_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>high enough, but still in one line</h2>
    <div class="high_div flex-space-around_div">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <h2>只有在父级容器中设置为flex才能生效</h2>
    <div class="flex-space-between_div">
      <ul>
        <li class="son">我的父级是ul</li>
        <li class="son">我的父级是ul</li>
        <li class="son">我的父级是ul</li>
      </ul>
    </div>


 
  </body>
</html>
